import React, { FC, ReactElement, useState } from 'react'
import cn from 'classnames'
import styles from './style.module.css'
interface ITab {
  label?: string
  key: string
  renderLabel?: () => ReactElement
  handleClick?: (key: string) => void
}
interface IProps {
  tabs: ITab[]
}
const Tabs: FC<IProps> = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(tabs?.[0].key)
  return (
    <div className={styles.root}>
      {tabs.map((v) => {
        const { label, key, renderLabel, handleClick = () => {} } = v
        return (
          <div
            className={cn(styles.tab, activeTab === key && styles.active)}
            onClick={() => {
              setActiveTab(key)
              handleClick(key)
            }}
          >
            {label || (renderLabel && renderLabel())}
          </div>
        )
      })}
    </div>
  )
}
export default Tabs
